<template>
  <el-sub-menu v-if="props.list.children && props.list.children.length > 0" :index="props.list.path" :key="props.list.path">
    <template #title>
      <el-icon>
        <component :is="props.list.meta.icon" />
      </el-icon>
      <span>{{props.list.meta.title}}</span>
    </template>
    <template v-for="item in props.list.children" :key="item.path">
      <layout-navs :list="item"></layout-navs>
    </template>
  </el-sub-menu>
  <template v-else>
    <el-menu-item :index="props.list.path" :key="props.list.path">
       <component :is="props.list.meta.icon" style="padding-right:5px" />
      <span1>{{props.list.meta.title}}</span1>
    </el-menu-item>
  </template>
</template>

<script>
  export default {
    name: 'LayoutNavs',
  }
</script>
<script setup>
  import {
    defineProps
  } from "vue"
  // import {
  //   Menu as IconMenu,
  // } from '@element-plus/icons-vue'
  // import { useRoute } from "vue-router";
  // const route=useRoute();

  const props = defineProps({
    list: Object
  })
</script>

<style lang="less" scoped>
  svg{
    width: 1.5em;
    height: 1.5em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
 }
</style>